<template>
  <div>
    <Panel>
      <span slot="title">商品列表</span>
      <div slot="main">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="商品价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="商品图片">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="props.row.imgUrl"
                  ></el-image>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.ctime | normalDate }}</span>
                </el-form-item>
                <el-form-item label="商品评价">
                  <span>{{ props.row.rating }}</span>
                </el-form-item>
                <el-form-item label="商品销量">
                  <span>{{ props.row.sellCount }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.goodsDesc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

          <el-table-column label="商品名称" prop="name"> </el-table-column>
          <el-table-column label="商品分类" prop="category"> </el-table-column>
          <el-table-column label="商品价格" prop="price"> </el-table-column>

          <el-table-column label="商品图片">
            <template slot-scope="props">
              <el-image
                style="width: 100px; height: 100px"
                :src="props.row.imgUrl"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="props">
              <el-button size="mini" 
                >编辑</el-button
              >
              <el-popconfirm
                title="确定删除吗?"
                class="ml10"
                @confirm="handleDelete(props.row.id)"
              >
                <el-button size="mini" type="danger" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 3, 5]"
          :page-size="1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="1"
        >
        </el-pagination>
      </div>
    </Panel>
  </div>
</template>

<script>
import Panel from "@/components/panel.vue";
import { listApi, delApi } from "@/api/goods.js";

export default {
  components: {
    Panel,
  },
  data() {
    return {
      // 表单
      multipleSelection: [],
      // 分页
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {
    this.getData();
  },

  methods: {
    async getData() {
      let res = await listApi({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });

      let { data, total } = res.data;

      if (!data.length && this.currentPage != 1) {
        this.currentPage -= 1;
        this.getData();
      }

      this.tableData = data;
      this.total = total;
      // console.log(data);
    },

    // 表单

    // 分页
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },

    // 删除
    async handleDelete(id) {
      let res = await delApi({ id });

      if (res.data.code == 0) {
        this.getData();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>